﻿<Window x:Class="Magnify.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Magnify" Width="400" Height="400"
    >
    <Grid PreviewMouseMove="OnMoveOverMainUI" VerticalAlignment="Center" Margin="10">
        <Grid Name="mainUI" >

          <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
          </Grid.RowDefinitions>
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
          </Grid.ColumnDefinitions>
          
          <StackPanel Grid.ColumnSpan="3" Orientation="Horizontal" Margin="0,0,0,20">
            <TextBlock Margin="5">Target size:</TextBlock>
                <TextBox Name="txtTargetSize" Text="50" TextChanged="ZoomChanged" />
            </StackPanel>
          <Slider Orientation="Horizontal" Grid.Row="1" Grid.ColumnSpan="3" Name="sliderTargetSize" Margin="0,20,0,30"
                              Minimum="2" Maximum="400" Width="400">
            <Slider.Value>
              <Binding ElementName="txtTargetSize" Path="Text"/>
            </Slider.Value>
          </Slider>
            <CheckBox Grid.Row="2" Grid.ColumnSpan="3" Name="checkEnableMagnifier" IsChecked="True"
                      HorizontalAlignment="Center" Margin="30">
                Magnifier
            </CheckBox>
            <TextBlock Grid.Row="3" Grid.ColumnSpan="3" FontFamily="Palatino Linotype" TextWrapping="Wrap" Margin="20">
                Use the checkbox to turn the magnifying glass on and off.
                Use the slider or the textbox to set the size of the region
                the magnifying glass zooms in on.
            </TextBlock>
            <Button Grid.Row="4" Grid.Column="2" Click="ExitClick">
              <AccessText>E_xit</AccessText>
            </Button>
        </Grid>
        <Canvas HorizontalAlignment="Left" VerticalAlignment="Top">
            <Canvas Name="magnifierCanvas">
                <Line StrokeThickness="30" X1="200" Y1="200" X2="300" Y2="300">
                    <Line.Stroke>
                        <LinearGradientBrush StartPoint="0.78786,1" EndPoint="1,0.78786">
                            <LinearGradientBrush.GradientStops>
                                <GradientStop Offset="0" Color="DarkGreen" />
                                <GradientStop Offset="0.9" Color="LightGreen" />
                                <GradientStop Offset="1" Color="Green" />
                            </LinearGradientBrush.GradientStops>
                        </LinearGradientBrush>
                    </Line.Stroke>
                </Line>
                <Path Fill="White" StrokeThickness="3" Width="250" Height="250">
                    <Path.Data>
                        <GeometryGroup>
                            <EllipseGeometry RadiusX="125" RadiusY="125" Center="125,125" />

                            <EllipseGeometry RadiusX="1" RadiusY="1" Center="125,125" />
                        </GeometryGroup>
                    </Path.Data>
                </Path>
                <Path Width="250" Height="250" Name="magnifierEllipse">
                    <Path.Fill>
                        <VisualBrush ViewboxUnits="Absolute" Viewbox="0,0,50,50"
                                     ViewportUnits="RelativeToBoundingBox" Viewport="0,0,1,1"/>
                    </Path.Fill>
                    <Path.Data>
                        <GeometryGroup>
                            <EllipseGeometry RadiusX="125" RadiusY="125" Center="125,125" />
                            <!-- Put a tiny hole in the magnifier so we can click through it -->

                            <EllipseGeometry RadiusX="1" RadiusY="1" Center="125,125" />
                        </GeometryGroup>
                    </Path.Data>
                </Path>
              <Ellipse StrokeThickness="3" Width="250" Height="250">
                <Ellipse.Stroke>
                  <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                    <LinearGradientBrush.GradientStops>
                      <GradientStop Color="#aaa" Offset="0" />
                      <GradientStop Color="#111" Offset="1" />
                    </LinearGradientBrush.GradientStops>
                  </LinearGradientBrush>
                </Ellipse.Stroke>
              </Ellipse>
              <Ellipse Canvas.Left="2" Canvas.Top="2" StrokeThickness="4" Width="246" Height="246">
                <Ellipse.Stroke>
                  <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                    <LinearGradientBrush.GradientStops>
                      <GradientStop Color="#555" Offset="0" />
                      <GradientStop Color="#eee" Offset="1" />
                    </LinearGradientBrush.GradientStops>
                  </LinearGradientBrush>
                </Ellipse.Stroke>

              </Ellipse>
            </Canvas>
        </Canvas>
    </Grid>
</Window>
